<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    // 虚拟dom可以构成组件
    // 一、类组件
    // 组件定义的时候首字母需要大写；
    // 类组件里提供一个 state内置属性 ，你可以追加自己的属性值 ；
    // 可以通过 setState 来修改  state里的值 ，1.修改 state的值 2.组件会重新渲染；

    class App extends React.Component {
      state = {
        index: 1
      }
      btnfn(key) {
        // console.log(index);
        // console.log( this);
        // this.state.index = index;
        // console.log(this.state.index)
        this.setState({ index: key });
      }
      render() {  // 类组件会自动有一个render 方法；
        return <div>
          <button onClick={() => { this.btnfn(1) }}>按钮一</button>
          <button onClick={() => { this.btnfn(2) }}>按钮二</button>
          <button onClick={() => { this.btnfn(3) }}>按钮三</button>
          {this.state.index === 1 && <div>111</div>}
          {this.state.index === 2 && <div>222</div>}
          {this.state.index === 3 && <div>333</div>}
        </div>   // 返还虚拟dom就可以；
      }
    }
    let root = ReactDOM.createRoot(document.querySelector("#app"));
    root.render(<App />);


  </script>
</body>

</html>